<template>
  <van-action-sheet
    v-model:show="localShow"
    :actions="actions"
    cancel-text="Cancel"
    :description="description"
    close-on-click-action
    @close="handleClose"
    @click-overlay="handleClose"
    @after-leave="handleAfterLeave"
  >
    <template #action="{ action }">
      <div class="custom-action-item">
        <i v-if="action.icon" :class="action.icon"></i>
        <span>{{ action.name }}</span>
      </div>
    </template>
  </van-action-sheet>
</template>

<script setup>
import { ref, watch } from "vue";

const props = defineProps({
  show: Boolean,
  actions: Array,
  description: String,
});

// 使用本地变量控制 v-model:show
const localShow = ref(props.show);

// 监听 props.show 的变化
watch(
  () => props.show,
  (newVal) => {
    localShow.value = newVal;
  }
);

// 定义 emits
const emit = defineEmits(["update:show", "close", "after-leave"]);

// 关闭弹窗
const handleClose = () => {
  localShow.value = false; // 更新本地状态
  emit("update:show", false); // 通知父组件更新
  emit("close");
};

// 动画结束后
const handleAfterLeave = () => {
  emit("after-leave");
};
</script>

<style  lang="scss">
// 弹窗样式
.van-action-sheet {
  .van-action-sheet__description {
    font-size: 20px;
    color: #000;
    font-weight: bold;
  }
  .van-action-sheet__content {
    .van-action-sheet__item {
      position: relative;
      &::after {
        position: absolute;
        box-sizing: border-box;
        content: " ";
        pointer-events: none;
        right: 16px;
        bottom: 0;
        left: 16px;
        border-bottom: 1px solid #ebedf0;
        transform: scaleY(0.5);
      }
      &:last-child::after {
        display: none;
      }
      .van-action-sheet__name {
        font-size: 16px;
        color: #000;
        font-weight: 400;
      }

      .icon-xiaofeiji {
        position: absolute;
        right: 110px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 25px;
        color: #1cb58e;
      }
      .custom-action-item {
        span {
          font-size: 16px;
          color: #000;
        }
      }
    }
  }
  .van-action-sheet__gap {
    height: 20px;
  }
}
</style>